<template>
    <div>
        <div class="header">
            <div class="title" v-if="isShowTitle">
                <span>{{ titleText[0] }}</span>
                <span class="trans" v-if="titleText.length && isShowBtn" />
                <span>{{ titleText[1] }}</span>
            </div>
            <div class="look" @click="look" v-if="maintenanceStore.stateOperation === 1">查看</div>
            <div v-else>
                <el-button type="primary" @click="handlderNormal" v-if="isShowBtn && Object.keys(maintenanceStore.treeSelectNode).length">一键正常</el-button>
                <el-button type="primary" @click="preSave" v-if="isShowBtn">预保存</el-button>
            </div>
        </div>
        <div style="margin-top: 30px">
            <w-table ref="tableRef" :isShowPagination="false" class="order-detail-table" :propTableConfig="tableConfig" style="height: 100%" v-if="isShowTable">
                <template #check="{ scope }">
                    <el-radio-group v-model="scope.row.isRadio" class="radio-group" @change="radioChange($event, scope.$index)">
                        <el-radio :label="true" size="large">是</el-radio>
                        <el-radio :label="false" size="large">否</el-radio>
                    </el-radio-group>
                </template>
                <template #checkLook="{ scope }">
                    <span :style="{ color: scope.row.state ? '#FF4D4F' : '' }"> {{ scope.row.state ? "是" : "否" }}</span>
                </template>
                <template #operate="{ scope }">
                    <el-button link type="primary" size="small" @click="handler(scope.row)" v-if="scope.row.isRadio">编辑</el-button>
                </template>
                <template #reportCheck="{ scope }">
                    <el-select v-model="scope.row.checked" placeholder="请选择检查结果" :suffix-icon="CaretBottom" @change="selectChange(scope.row)">
                        <el-option v-for="select in scope.row.inspectionResult" :key="select.value" :label="select.label" :value="select.value" />
                    </el-select>
                </template>
                <template #handle="{ scope }">
                    <el-select v-model="scope.row.handle" placeholder="请选择处置方式" :suffix-icon="CaretBottom" @change="selectChange(scope.row)" :disabled="scope.row.disable">
                        <el-option v-for="select in scope.row.dsposalMethod" :key="select.value" :label="select.label" :value="select.value" />
                    </el-select>
                </template>
            </w-table>
        </div>
    </div>
</template>

<script setup>
import { provide, ref } from "vue";
import { CaretBottom } from "@element-plus/icons-vue";
import { useMaintenance } from "@/store/maintenance.js";
import { useReportOrderDetail } from "@/store/reportOrderDetail.js";
import { mainStore } from "@/store/main.js";
import { useRouter } from "vue-router";
const maintenanceStore = useMaintenance();
const reportOrderDetailStore = useReportOrderDetail();
const mStore = mainStore();
const router = useRouter();
const emits = defineEmits(["radioChange", "preSave", "handlderNormal"]);
const props = defineProps({
    tableConfig: {
        type: Object,
        default: () => ({})
    },
    tableData: {
        type: Array,
        default: () => []
    },
    isShowTitle: {
        type: Boolean,
        default: true
    },
    titleText: {
        type: Array,
        default: () => []
    },
    isShowTable: {
        type: Boolean,
        default: true
    },
    isShowBtn: {
        type: Boolean,
        default: true
    }
});
const tableRef = ref(null);
const selectChange = (row) => {
    if (row.checked == "否" || row.checked == "无") {
        row.disable = true;
        row.handle = "";
    } else {
        row.disable = false;
    }
    const pFind = maintenanceStore.reportTreeData.find((item) => maintenanceStore.treeSelectNode.parentId == item.id);
    maintenanceStore.treeSelectNode.leftHot = maintenanceStore.treeSelectNode.tableData.filter((item) => item.checked && item.handle && (item.checked !== "否" || item.checked !== "无")).length;
    pFind.leftHot = pFind.childs.reduce((a, b) => a + b.leftHot, 0);
};
const handler = () => {
    emits("handler");
};
const radioChange = (e, index) => {
    emits("radioChange", index, e);
};
const handlderNormal = () => {
    maintenanceStore.treeSelectNode.items.forEach((item) => {
        if (item.isRadio) return;
        item.isRadio = false;
    });
    emits("handlderNormal");
};
const preSave = () => {
    let detailForm = [];
    let anomalyForm = [];
    recursionData(maintenanceStore.reportTreeData);
    recursionDatas(maintenanceStore.treeData);
    function recursionData(arr) {
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].depth) {
                anomalyForm.push({
                    firstStructureId: arr[i].parentId,
                    secondStructureId: arr[i].id,
                    images: arr[i].imgList.map((item) => item.id),
                    remark: arr[i].remark,
                    items: arr[i].tableData.map((sonItem) => ({
                        itemId: sonItem.inspectionItemId,
                        checkInspectionResultText: sonItem.checked,
                        checkDisposalMethodText: sonItem.handle
                    }))
                });
            }
            if (!arr[i].childs.length) continue;
            recursionData(arr[i].childs);
        }
    }
    function recursionDatas(arr) {
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].parentId) {
                detailForm = [...detailForm, ...arr[i].items.filter((item) => item.isRadio !== null).map((item) => ({ id: item.id, state: item.isRadio }))];
            }
            if (!arr[i].childs.length) continue;
            recursionDatas(arr[i].childs);
        }
    }
    const model = {
        orderId: mStore.tableData.id,
        orderCode: mStore.tableData.orderCode,
        detailForm,
        anomalyForm
    };
    emits("preSave", model);
};
const look = () => {
    if (!mStore.tableData.repairCode) {
        ElMessage.error("暂无报修记录");
        return;
    }
    router.push(`/main/reportManage/reportOrderDetail?orderCode=${mStore.tableData.repairId}&order=${mStore.tableData.repairCode}`);
};
provide("isShowSelect", false);
defineExpose({
    tableRef
});
</script>

<style lang="less" scoped>
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title {
        display: flex;
        align-items: center;
        .trans {
            margin: 0 14px;
            width: 0;
            height: 0;
            border-top: 4px solid transparent;
            border-right: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: 4px solid #000;
        }
        span {
            color: #1b3646;
            &:first-child {
                font-weight: 400;
                color: #595959;
            }
            &:last-child {
                font-size: 16px;
                font-weight: 600;
                color: #1b3646;
            }
        }
    }
    .look {
        font-size: 14px;
        color: #0065b2;
        cursor: pointer;
    }
}

.radio-group {
    margin-right: 10px;
}
</style>
